/* 
*@module: echarts setter
*@module: description: draw echarts according to the given params
*@author:王妍
*/

import echartsgl from 'echarts-gl'
let echarts3_0 = require("echarts/lib/echarts"); // 引入基本模板
let constdepth;

const install = function (Vue) {
    /* Object.defineProperties(obj, props) */
    Object.defineProperties(Vue.prototype, {
        $chart: {
            /* 作为该属性的 getter 函数，如果没有 getter 则为undefined。函数返回值将被用作属性的值 */
            get() {
                return {
                    radarsetter: function (id, radarserisevalue) {
                        let myRadarChart = echarts.init(document.getElementById(id));
                        const optionData = {
                            title: {
                                // text: this.$refs["cascaderAddr"].currentLabels[1] + "最新情况",
                                text: "lab数据",
                                x: "center",
                                y: "50"
                            },
                            tooltip: {
                                show: true,
                                trigger: "axis",
                                hideDelay: 2000
                            },
                            legend: {
                                // orient: "vertical",
                                x: "center",
                                y: 100,
                                data: radarserisevalue.legend
                            },
                            toolbox: {
                                show: true,
                                orient: "vertical",
                                x2: "1%",
                                y: "150",
                                feature: {
                                    // mark: { show: true },
                                    // dataView: { show: true, readOnly: false },
                                    // restore: { show: true },
                                    // saveAsImage: { show: true }
                                }
                            },
                            polar: [
                                {
                                    indicator: radarserisevalue.max,
                                    axisLine: {
                                        show: true
                                    },
                                    type: "polygon",
                                    axisLabel: {
                                        // 坐标轴文本标签，详见axis.axisLabel
                                        show: false,
                                        textStyle: {
                                            color: "#247bd7" // 坐标轴刻度文字的样式
                                        }
                                    },
                                    radius: 130,
                                    center: ["50%", "65%"],
                                    scale: true,
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            width: 1,
                                            color: "#9999CC" // 设置网格的颜色
                                        }
                                    }
                                }
                            ],
                            calculable: true,
                            color: ["#FE7979", "#000000", "#CCCC66", "#9999CC", "#99CCCC"],
                            series: [
                                {
                                    name: "17国标 vs 实际值",
                                    type: "radar",
                                    symbol: "rect", // 拐点的样式，还可以取值'rect','angle'等
                                    symbolSize: 1, // 拐点的大小
                                    areaStyle: {
                                        normal: {
                                            width: 1,
                                            opacity: 0.9
                                        }
                                    },
                                    data: radarserisevalue.data
                                }
                            ]
                        };
                        myRadarChart.setOption(optionData);
                        return myRadarChart
                    },
                    barsetter: function (id, seriesvalue) {
                        let myBarChart = echarts3_0.init(document.getElementById(id));
                        const optionData = {
                            title: {
                                show: true,
                                text:
                                    // this.$refs["cascaderAddr"].currentLabels[1]
                                    "阶段治理情况：" + seriesvalue[5].elementname,
                                x: "center",
                                y: "10"
                            },
                            tooltip: {
                                trigger: "axis",
                                axisPointer: {
                                    type: "cross",
                                    crossStyle: {
                                        color: "#999"
                                    }
                                }
                            },
                            toolbox: {
                                show: true,
                                orient: "vertical",
                                x2: "2%",
                                y: "120",
                                feature: {
                                    // dataView: { show: true, readOnly: false },
                                    // magicType: { show: true, type: ["line", "bar"] },
                                    // restore: { show: true },
                                    // saveAsImage: { show: true }
                                }
                            },
                            grid: {
                                top: "100", //图表内容距上下左右的距离，可设置top，left，right，bottom
                                bottom: "5%",
                                left: "12%",
                                right: "12%",
                                containLabel: true
                            },
                            legend: {
                                data: seriesvalue[1].mean_value,
                                x: "center",
                                y: "55"
                            },

                            color: ["#CCCC66", "#99CC99"],
                            xAxis: [
                                {
                                    type: "category",
                                    // data: ["初次调查", "详细调查", "修复调查"],
                                    data: seriesvalue[0].assess_type,
                                    axisPointer: {
                                        type: "shadow"
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: "value",
                                    name: "单位:" + seriesvalue[4].unit,
                                    min: 0,
                                    // max: 15,
                                    // interval: '5%',
                                    axisLabel: {
                                        formatter: "{value}"
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: seriesvalue[2].mean_value,
                                    type: "bar",
                                    // barWidth: 80,
                                    data: seriesvalue[2].value
                                },
                                {
                                    name: seriesvalue[3].max,
                                    type: "bar",
                                    // barWidth: 80,
                                    data: seriesvalue[3].value
                                }
                            ]
                        };
                        myBarChart.setOption(optionData);
                        return myBarChart;
                    },
                    linesetter: function (id, lineseriesvalue) {
                        let myLineChart = echarts.init(document.getElementById(id));
                        const optionData = {
                            title: {
                                show: true,
                                text: "各采样处" + lineseriesvalue.elementname + "变化",
                                // subtext: this.selectedOptionsLabesl,
                                x: "center",
                                y: "0"
                            },
                            tooltip: {
                                trigger: "axis",
                                position: function (p) {
                                    return [p[0] + 10, "10%"];
                                },
                                axisPointer: {
                                    // 坐标轴指示器，坐标轴触发有效
                                    type: "line" // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            color: ["#CCCC99", "#9999CC"],
                            // color: ["#9999cc"],
                            legend: {
                                // data: ["样本值", "平均值"],
                                data: ["样本值", "17国标值"],
                                x: "center",
                                y: "55"
                            },
                            grid: {
                                top: "100", //图表内容距上下左右的距离，可设置top，left，right，bottom
                                bottom: "5%",
                                left: "12%",
                                right: "12%",
                                containLabel: true
                            },
                            toolbox: {
                                show: true,
                                orient: "vertical",
                                x2: "2%",
                                y: "120",
                                feature: {
                                    // mark: { show: true },
                                    // dataView: { show: true, readOnly: false },
                                    // magicType: { show: true, type: ["line", "bar"] },
                                    // restore: { show: true },
                                    // saveAsImage: { show: true }
                                }
                            },
                            calculable: true,
                            xAxis: [
                                {
                                    type: "category",
                                    boundaryGap: false,
                                    data: lineseriesvalue.xAxis
                                }
                            ],
                            yAxis: [
                                {
                                    type: "value",
                                    name: "单位: " + lineseriesvalue.unit,
                                    axisLabel: {
                                        // formatter: "{value}" + lineseriesvalue.unit
                                        // formatter: "{value}" 
                                    }
                                }
                            ],
                            series: [
                                {
                                    name: "样本值",
                                    type: "line",
                                    data: lineseriesvalue.data,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                                color: "#CCCC99"
                                            }
                                        }
                                    },
                                    markPoint: {
                                        data: [
                                            { type: "max", name: "最大值" },
                                            { type: "min", name: "最小值" }
                                        ]
                                    },
                                    /* markLine: {
                                      data: [
                                        [
                                          {
                                            coord: [
                                              lineseriesvalue.xAxis[0],
                                              lineseriesvalue.Threshold17
                                            ]
                                          },
                                          {
                                            coord: [
                                              lineseriesvalue.xAxis[lineseriesvalue.xAxis.length - 1],
                                              lineseriesvalue.Threshold17
                                            ]
                                          }
                                        ] //如何获取grid上侧最大值，目前是写死的
                                      ]
                                    } */
                                },
                                {
                                    name: "17国标值",
                                    type: "line",
                                    // data: [4, 5, 6, 16, 3, 1, 20, 12, 12, 11],
                                    // data: lineseriesvalue.mean_value,
                                    data: lineseriesvalue.Threshold17,
                                    itemStyle: {
                                        normal: {
                                            lineStyle: {
                                                color: "#9999CC"
                                            }
                                        }
                                    }
                                }
                            ]
                        };
                        myLineChart.setOption(optionData);
                        return myLineChart;
                    },
                    barsetter2d: function (id, bar2dseriesvalue, map) {
                        let my2dbar = echarts3_0.init(document.getElementById(id));
                        constdepth = bar2dseriesvalue['depth'];
                        const series = [];
                        const element_list = [];
                        for (let i of bar2dseriesvalue['data']) {
                            for (let j in i) {
                                element_list.push(map.get(j));
                                series.push(
                                    {
                                        name: map.get(j),
                                        type: 'bar',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'insideRight'
                                            }
                                        },
                                        data: i[j]
                                    },
                                )
                            }
                        }
                        const optionData = {
                            title: {
                                show: true,
                                text: "各超标元素超标指数",
                                subtext: "超标指数=元素值/17国标",
                                x: "center",
                                y: "0"
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                x:"right",
                                y:"10",
                                // data: ['铜', '汞', '镉', '银', '砷']
                                data: element_list,
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                position: 'top',
                            },
                            yAxis: {
                                type: 'category',
                                inverse: true,
                                data: bar2dseriesvalue['depth'],
                                nameTextStyle:{
                                    fontSize:20
                                }
                            },
                            color:["#CCCC66", "#9999CC", "#99CCCC","#CCFFFF","#FFCCCC","#99CCCC","#FFCC99","#FF9999","#CCCC99","#CCCC99","#CCCC99","#CCCCCC","#FF9966",],
                            series: series,
                        };
                        my2dbar.setOption(optionData);
                        return my2dbar;
                    },
                    barsetter3d: function (id, bar3dseries, assess_type, type) {
                        let my3dbar = echarts3_0.init(document.getElementById(id));
                        let series = [];
                        let temp_depth = ["深度一","深度二","深度三","深度四"]
                        bar3dseries["series"].reverse();
                        // let temp_depth = constdepth;
                        if (type == "earth") {
                            //如果是土壤数据
                            if (assess_type !== 3) {
                                let flag = 0;
                                bar3dseries["series"].map(element => {
                                    if (assess_type == 1) {
                                        series.push(
                                            { type: "bar3D",name:temp_depth[2-flag], data: [element], stack: "stack", shading: "lambert",itemStyle:{opacity:0.6}, emphasis: { label: { show: true } } },
                                        )
                                        flag+=1
                                    } else if (assess_type == 2) {
                                        series.push(
                                            { type: "bar3D",name:temp_depth[3-flag], data: element, stack: "stack", shading: "lambert",itemStyle:{opacity:0.6}, emphasis: { label: { show: true } } },
                                        )
                                        flag+=1
                                    } else { }
                                })
                            } else {
                                series.push(
                                    { type: "bar3D", name:temp_depth[0],data: bar3dseries["series"], stack: "stack", shading: "lambert",itemStyle:{opacity:0.6}, emphasis: { label: { show: true } } },
                                )
                            }
                        }else{
                            //如果是水数据
                            let flag = 0;
                            bar3dseries["series"].map(element => {
                                if (assess_type == 1) {
                                    series.push(
                                        { type: "bar3D", name:temp_depth[flag], data: [element], stack: "stack", shading: "lambert",itemStyle:{opacity:0.6}, emphasis: { label: { show: true } } },
                                    )
                                    flag+=1
                                }else {
                                    series.push(
                                        { type: "bar3D", name:temp_depth[1-flag], data: element, stack: "stack", shading: "lambert",itemStyle:{opacity:0.6}, emphasis: { label: { show: true } } },
                                    )
                                    flag+=1
                                }
                            })
                            
                        }
                        const optionData = {
                            title: {
                                show: true,
                                text: "各深度元素值",
                                // subtext: this.selectedOptionsLabesl,
                                x: "center",
                                y: "0"
                            },
                            legend:{
                                x:"right",
                                y:"20",
                                show:true
                            },
                            xAxis3D: {
                                name:"经度",
                                type: 'value',
                                scale: true,
                                // axisLabel:"lng"
                            },
                            yAxis3D: {
                                name:"纬度",
                                type: 'value',
                                scale: true,
                            },
                            zAxis3D: {
                                name:"元素值",
                                type: 'value',
                            },
                            axisPointer: {
                                show: true,
                            },
                            grid3D: {
                                viewControl: {
                                    // autoRotate: true
                                },
                                light: {
                                    main: {
                                        shadow: true,
                                        quality: 'ultra',
                                        intensity: 2
                                    }
                                }
                            },
                            series: series
                        };
                        my3dbar.setOption(optionData);
                        return my3dbar;
                    }
                }
            }
        }
    })
}

export default {
    install
}
